import React, { useState, useContext } from "react";
import { UserContext } from "../store";
import { PlusOutlined,SearchOutlined,RedoOutlined } from "@ant-design/icons";
import { Form, Row, Col, Button, Input,Space } from "antd";
import "./index.css";

const QueryTitle = () => {
  const { store, dispatch } = useContext(UserContext);

  const onChangeId = (e) => {
    dispatch({
      type: "queryId",
      id: e.target.value
    });
  };
  const onChangeName = (e) => {
    dispatch({
      type: "queryName",
      name: e.target.value
    });
  };

  const onSearch = (e) => {
    const list = store.authList;
    let idArr = [];
    let nameArr = [];
    if (store.query.id) {
      idArr = list.filter((item) => {
        return item.id.indexOf(store.query.id) >= 0;
      });
    }

    if (store.query.name) {
      nameArr = list.filter((item) => {
        console.log(item.name, store.query.name);
        return item.name.indexOf(store.query.name) >= 0;
      });
    }

    dispatch({
      type: "authList",
      authList: [...idArr, ...nameArr]
    });
  };

  const onReset = () => {
    dispatch({
      type: "authList",
      authList: store.finalList
    });
    dispatch({
      type: "queryId",
      id: ""
    });
    dispatch({
      type: "queryName",
      name: ""
    });
  };

  const onInsert = () => {
    dispatch({
      type: "visible",
      visible: true,
      isEdit: false
    });
  };

  return (
    <Form name="query">
      <Row gutter={24}>
        <Col span={8}>
          <Form.Item label="ID编号" name="id">
            <Input value={store.query.id} onChange={onChangeId}></Input>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label="权限名称" name="name">
            <Input
              value={store.query.name}
              onChange={onChangeName}
            ></Input>
          </Form.Item>
        </Col>
        <Col span={8}>
			<Space>
				 <Button type="primary" onClick={onSearch}>
				 <SearchOutlined />
				   查询
				 </Button>
				 <Button onClick={onReset}>
				 <RedoOutlined />重置
				 </Button>
			</Space>
          
        </Col>
      </Row>
      <Form.Item>
        <Button icon={<PlusOutlined />} onClick={onInsert} type="primary">
          新增
        </Button>
      </Form.Item>
    </Form>
  );
};

export default QueryTitle;
